<template>
  <div
    ref="chartRef"
    :style="{ width: '100%', height: '100%', minHeight: '300px' }"
  ></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';

// 定义 props
const props = defineProps({
  options: { type: Object, required: true }, // options 是一个对象
});

// 创建 ref 来绑定图表 DOM
const chartRef = ref(null);
let chartInstance = null;

// 设置图表选项
const setChartOptions = () => {
  if (chartInstance && props.options) {
    // 定义默认的配置，默认值用来补充传入 options 中没有的部分
    const baseOptions = {
      title: [
        {
          // 标题
          text: '',
          left: 'left',
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#1d2129',
          },
        },
        {
          //   left: 'right',
          // 标题
          subtext: '',
          // 副标题样式
          subtextStyle: {
            fontSize: 12,
            fontWeight: 'normal',
          },
        },
      ],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        bottom: '0%',
        left: 'center',
        icon: 'circle', // 使用圆形图标
        itemWidth: 10, // 图例图标的宽度
        itemHeight: 10, // 图例图标的高度
        textStyle: {
          color: '#666', // 图例文字颜色
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        top: '20%',
        containLabel: true,
      },
      xAxis: props.options.xAxis || { type: 'category', data: [] },
      yAxis: props.options.yAxis || {
        type: 'value',
        axisLabel: { formatter: '{value}' },
      },
      series: props.options.series || [],
    };

    // 合并用户自定义选项和基础默认选项
    const finalOptions = {
      ...baseOptions,
      ...props.options,
    };
    chartInstance.setOption(finalOptions);
  }
};

// 初始化图表
const initChart = () => {
  if (
    chartRef.value &&
    chartRef.value.clientWidth > 0 &&
    chartRef.value.clientHeight > 0
  ) {
    chartInstance = echarts.init(chartRef.value);
    setChartOptions();
    chartInstance.resize();
  }
};

// 使用 ResizeObserver 监听容器大小变化
const resizeObserver = new ResizeObserver(() => {
  if (chartInstance) {
    chartInstance.resize(); // 确保每次尺寸变化时图表自适应
  } else {
    initChart(); // 如果还没有初始化图表，则重新初始化
  }
});

// 监听 options 变化
watch(
  () => props.options,
  () => {
    setChartOptions();
  },
  { deep: true },
);

// 初始化图表
onMounted(() => {
  if (chartRef.value) {
    resizeObserver.observe(chartRef.value); // 开始观察容器的尺寸变化
    initChart();
  }

  // 监听窗口 resize 事件
  window.addEventListener('resize', () => {
    chartInstance?.resize();
  });
});

// 销毁图表
onUnmounted(() => {
  window.removeEventListener('resize', () => {
    chartInstance?.resize();
  });
  resizeObserver.disconnect(); // 停止监听
  chartInstance?.dispose();
});
</script>
